Q: 是時候表演真正的技術了？
A: 要動起來是少不了animation屬性的！

本篇開始將使用animation屬性做微動畫，別於transition是在樣式間轉換的漸變，animation可以做到比較複雜的變化，並且透過屬性的調整，可以選定動畫演繹的次數、階段樣式等等，跟transition相比可以做出更多樣化的動態效果。

要先了解屬性！

animation

• 這個屬性是多個屬性的簡寫版本。

animation-name

• 顧名思義是定義動畫的名稱，這個屬性設定元素要演繹哪個腳本動畫，而腳本動畫會以影格（@keyframes）方式撰寫。

animation-delay

• 演繹動畫前延遲的時間。

animation-duration

• 動畫演繹的時間。

animation-iteration-count

• 這個屬性的設定代表動畫會播放的次數。
• 預設值為 1 ，可設定的值為 0 (含)以上的正整數或是infinite代表無限。

animation-timing-function

• 動畫播放的速度曲線。
• 預設值為 ease，速度會從一開始慢到中間時加速，最後再變慢。

animation-play-state

• 這個屬性操控動畫是否播放。
• 預設值為running，也可以設置為pause可以讓動畫暫停。

animation-direction

• 動畫在演繹後是否反向演繹。
• 預設值為normal代表動畫演繹後將從頭開始演繹。

animation-fill-mode

• 該屬性定義動畫沒有在演繹時的樣式，預設為none代表如果動畫演繹前或是演繹完後，元素都會顯示原本的樣式。
• 如果希望動畫演繹前後可以以animation內影格的樣式影響元素，可以使用該元素設定。

@keyframes

• 上述有提到@keyframes，@keyframes定義了動畫的腳本，每段動畫到什麼階段要演繹什麼，皆設定在@keyframes內。
• @keyframes的寫法分為兩種：
  • % ：可以從0%設置到100%。
  • from(等於0%)、to(等於100%)。

以下來個小小範例，下一篇就要進入重點了！

<style>
  .block {
    width: 300px;
    height: 60px;
    background-color: blueviolet;
    animation: fadeInOut 3s infinite;
  }

  @keyframes fadeInOut {
    0% {
      opacity: 0
    }
    50% {
      opacity: 1
    }
    100% {
      opacity: 0
    }
  }
</style>

<div class="block"></div>

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！